import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { DemoStore } from './store'
import { Row, Col, Button, Form, Input, Select } from 'antd'

const FormItem = Form.Item
const TextArea = Input.TextArea
const Option = Select.Option

@inject('demoStore')
@observer
export default class Demo extends React.Component<{ demoStore: DemoStore }>{

	componentDidMount() {
		console.log(this.props.demoStore.count)
	}

	render() {
		const {
			apiResult, testApi, apiUrl, apiType, apiParams,
			apiMethod, inputApi, methodChange, typeChange,
			inputParams
		} = this.props.demoStore
		return (
			<div>
				{/* 接口测试 */}
				<section style={styles.block}>
					<h3>接口测试</h3>
					<Row style={styles.padding}>
						<Col span={24}>
							<Form>
								<FormItem label="api" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
									<Row gutter={8}>
										<Col span={12}>
											<Input placeholder="请输入url" onChange={e => inputApi(e.target.value)} value={apiUrl} />
										</Col>
										{
											apiType === '/api' ?
												<Col span={3}>
													<Select
														value={apiMethod}
														onChange={methodChange}
													>
														<Option value="GET">GET</Option>
														<Option value="POST">POST</Option>
														<Option value="PUT">PUT</Option>
														<Option value="DELETE">DELETE</Option>
													</Select>
												</Col> : ''
										}
										<Col span={3}>
											<Select value={apiType} onChange={typeChange}>
												<Option value="/api">RESTful</Option>
												<Option value="/graphql">GraphQL</Option>
											</Select>
										</Col>
										<Col span={6}>
											<Button type="primary" onClick={testApi}>发送</Button>
										</Col>
									</Row>
								</FormItem>
								<FormItem label="参数(json格式)" labelCol={{ span: 4 }} wrapperCol={{ span: 12 }}>
									<TextArea rows={6} onChange={e => inputParams(e.target.value)} value={apiParams} />
								</FormItem>
								<FormItem label="结果" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
									<TextArea rows={24} value={apiResult} />
								</FormItem>
							</Form>
						</Col>
					</Row>
				</section>
			</div>
		)
	}
}

const styles = {
	block: {
		marginBottom: '20px',
		boxShadow: 'rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px',
		padding: '10px'
	},
	padding: {
		padding: '10px 0'
	}
}